<!--工作台页面-->
<template>
  <div id="Dashboard">
    <div class="dashboard-title">测试Echarts图表组件库的使用</div>
    <!-- 柱状图+折线图 -->
    <div class="echartsBox">
      <t-card title="柱状图" class="dashboard-item">
        <div ref="barChart" style="width: 100%; height: 250px;"></div>
      </t-card>
      <t-card title="折线图" class="dashboard-item">
        <div ref="lineChart" style="width: 100%; height: 250px;"></div>
      </t-card>
    </div>
    <!-- 双柱状图+双折线图 -->
    <div class="echartsDoubleBox">
      <t-card title="双柱状图" class="dashboard-item">
        <div ref="barChart2" style="width: 100%; height: 250px;"></div>
      </t-card>
      <t-card title="双折线图" class="dashboard-item">
        <div ref="lineChart2" style="width: 100%; height: 250px;"></div>
      </t-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
// 引入封装的Echarts
import { useECharts } from '@/hooks/UserEcharts';

const barChart = ref(null);
const lineChart = ref(null);
const barChart2 = ref(null);
const lineChart2 = ref(null);

let resizeHandler = null;
onMounted(() => {
  initBarChart();
  initLineChart();
  initBarChart2();
  initLineChart2();
  // 响应式resize
  resizeHandler = () => {
    barChartInstance.value && barChartInstance.value.resize();
    lineChartInstance.value && lineChartInstance.value.resize();
    barChart2Instance.value && barChart2Instance.value.resize();
    lineChart2Instance.value && lineChart2Instance.value.resize();
  };
  window.addEventListener('resize', resizeHandler);
  setTimeout(resizeHandler, 100); // 首次渲染后主动触发一次
  console.log('【工作台页面加载完毕】')
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler);
});

// 初始化单柱状图
const { chartInstance: barChartInstance, initChart: initBarChart } = useECharts(barChart, {
  tooltip: {},
  grid: { left: '1%', right: '0%', bottom: '0%', top: '3%', containLabel: true },
  xAxis: { data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'] },
  yAxis: { type: 'value', min: 0, max: 210, interval: 30 },
  series: [{
    name: '销量',
    type: 'bar',
    data: [106, 100, 150, 80, 100, 120, 130, 110, 150],
    itemStyle: {
      type: 'linear',
      color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: '#A8C4FF' },
            { offset: 1, color: '#6592FF' },
          ]
      ),
      barBorderRadius: 5,
    },
  }],
});

// 初始化单折线图
const { chartInstance: lineChartInstance, initChart: initLineChart } = useECharts(lineChart, {
  tooltip: {},
  grid: { left: '1%', right: '2%', bottom: '0%', top: '3%', containLabel: true },
  xAxis: { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
  yAxis: { type: 'value', min: 0, max: 210, interval: 30 },
  series: [{
    name: '销量',
    type: 'line',
    data: [106, 100, 150, 80, 100, 120, 130, 110, 150, 140, 160, 180],
    itemStyle: { color: '#6592FF' },
    lineStyle: { width: 3, color: '#6593FF' },
    symbol: 'circle',
    symbolSize: 0,
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#e1ebff' },
        { offset: 1, color: '#FDFDFF' }
      ])
    },
    smooth: true,
  }]
});

// 初始化双柱状图
const { chartInstance: barChart2Instance, initChart: initBarChart2 } = useECharts(barChart2, {
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['销量1', '销量2'] },
  grid: { left: '1%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
  xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'] },
  yAxis: { type: 'value', min: 0, max: 210, interval: 30 },
  series: [
    {
      name: '销量1',
      type: 'bar',
      data: [106, 100, 150, 80, 100, 120, 130, 110, 150],
      itemStyle: {
        type: 'linear',
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#A8C4FF' },
              { offset: 1, color: '#6592FF' }
            ]
        ),
        barBorderRadius: 5
      }
    },
    {
      name: '销量2',
      type: 'bar',
      data: [80, 90, 120, 70, 110, 100, 140, 130, 160],
      itemStyle: {
        type: 'linear',
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#f7e1ff' },
              { offset: 1, color: '#fb99ff' }
            ]
        ),
        barBorderRadius: 5
      }
    }
  ]
});

// 初始化双折线图
const { chartInstance: lineChart2Instance, initChart: initLineChart2 } = useECharts(lineChart2, {
  tooltip: { trigger: 'axis', formatter: '{b}: {c}' },
  legend: { data: ['销量1', '销量2'], bottom: 0 },
  grid: { left: '1%', right: '2%', bottom: '10%', top: '3%', containLabel: true },
  xAxis: { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] },
  yAxis: { type: 'value', min: 0, max: 210, interval: 30 },
  series: [
    {
      name: '销量1',
      type: 'line',
      data: [106, 100, 150, 80, 100, 120, 130, 110, 150, 140, 160, 180],
      itemStyle: { color: '#6592FF' },
      lineStyle: { width: 3, color: '#6592FF' },
      symbol: 'circle',
      symbolSize: 0,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(101, 146, 255, 0.6)' },
          { offset: 1, color: 'rgba(101, 146, 255, 0)' }
        ])
      },
      smooth: true,
    },
    {
      name: '销量2',
      type: 'line',
      data: [80, 90, 120, 70, 110, 100, 140, 130, 160, 150, 170, 190],
      itemStyle: { color: '#b8ffae' },
      lineStyle: { width: 3, color: '#439b4a' },
      symbol: 'circle',
      symbolSize: 0,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(176,255,201,0.6)' },
          { offset: 1, color: 'rgba(205,251,210,0)' }
        ])
      },
      smooth: true,
    }
  ]
});

</script>

<style scoped lang="less">
#Dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 500px;
}
.dashboard-title {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 8px 0;
  color: #222;
  padding-left: 8px;
}
.echartsBox, .echartsDoubleBox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 5px;
}
.dashboard-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 让t-card内容区高度自适应且撑满 */
}
.dashboard-item :deep(.t-card__body) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 250px;
  /* 让echarts容器始终居中且撑满 */
}
.dashboard-item :deep(.t-card__body) > div[ref] {
  width: 100%;
  height: 100%;
  min-height: 250px;
}
@media (max-width: 1200px) {
  .echartsBox, .echartsDoubleBox {
    grid-template-columns: 1fr;
  }
}
</style>
